<template>

  <view class="container">
    <!--banner-->
    <view class="tui-banner-box">
      <swiper :duration="150" class="tui-banner-swiper" :circular="true" previous-margin="60rpx" next-margin="60rpx"
        @change="change">
        <swiper-item v-for="(item, index) in vipCard" :key="index" class="tui-banner-item">
          <image :src="item.image" class="tui-slide-image" :class="[current != index ? 'tui-banner-scale' : '']"
            mode="scaleToFill" lazy-load></image>
          <view class="tui-slide-text">
            <h1>{{ item.name }}</h1>
            <text>{{ item.remark }}</text>
          </view>

          <view v-if="userVip" @click="oncodeClick">
            <block v-if="userVip.vipCardId === item.id">
              <text class="mintext" style="color: #fff;">使用：{{ userVip.residueNumber}}/{{ userVip.totalNumber}}</text>
              <image src="/static/images/mine/qrcode.png" mode="widthFix" class="minImage"></image>
            </block>
          </view>
          <view class="tui-slide-box" @click="onButtonClick" v-if="userInfo.isUser || userVip">
            开通会员
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!--banner-->

    <!--  -->
    <view class="dot">
      <view class="dot_box">

      </view>
      <view class="dot_box1">

      </view>
    </view>

    <view class="bodyer">
      <view class="bodyer_title">
        酷玩卡会员所享权益
      </view>
      <view class="headerTitle_img"></view>

      <view class="bodyer_box">
        <view class="bodyer_left">
          <view class="bodyer_left_title">
            <image src="/static/images/mine/times.png" mode="widthFix"></image>
            <h1>入馆次数 <text style="color: rgba(255, 102, 102, 1);font-weight: bold;">×{{ currentCard.number }}</text>
            </h1>
          </view>
          <view class="bodyer_left_text">{{ currentCard.remark }}</view>
        </view>
        <view class="bodyer_left">
          <view class="bodyer_left_title">
            <image src="/static/images/mine/shop.png" mode="widthFix" style="width: 40rpx;height: 40rpx;">
            </image>
            <h1>全国门店通用</h1>
          </view>
          <view class="bodyer_left_text">会员卡支持全国每一家门店使用</view>
        </view>
      </view>
    </view>

    <view class="footer_text">查看会员详细规则
      <image src="../../static/images/mine/nani.png" mode="widthFix"
        style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
    </view>

    <view class="open" v-if="isLogin">
      <view class="open_text">
        <h1 v-cloak>￥<text style="font-size: 56rpx; font-weight: bold;"
            v-cloak>{{ currentCard.preferentialPrice }}</text></h1>
        <text style="text-decoration: line-through;color: rgba(61, 61, 61, 0.5);margin-left: 10rpx;"
          v-cloak>￥{{ currentCard.originalPrice }}</text>
      </view>
      <!-- <view v-if="userVip && userVip.vipCardId === currentCard.id" class="open_button"
        @click="onButtonClick">
        升级会员
      </view> -->
      <view class="open_button" @click="onButtonClick">
        立即开通
      </view>
    </view>

    <van-popup :show="codeshow" @close="oncodeClose" custom-style="height: 500rpx;width: 500rpx">
      <!-- 二维码 -->
      <view class="qrcode d-flex just-content-center align-items-center">
        <canvas style="width: 500rpx;height: 500rpx;" canvas-id="memberCode"></canvas>
      </view>
    </van-popup>

    <van-popup round :show="Buttonshow" @close="onButtonClose" custom-style="height: 400rpx;width: 500rpx">
      <!-- 二维码 -->
      <view class="qrcode_button">
        <h1>请绑定您的手机号</h1>
        <button type="default" open-type="getPhoneNumber" @getphonenumber="bindPhone">一键绑定</button>
      </view>
    </van-popup>
  </view>
</template>

<script>
  import {
    vipCard,
    buyCard,
    bindWxPhone,
    getUserInfo
  } from "@/api/user.js";
  import {
    mapGetters,
    mapActions,
    mapState,
    mapMutations
  } from 'vuex'
  const qrCode = require('@/libs/weapp-qrcode.js');
  export default {
    data() {
      return {
        current: 0,
        userVip: false,
        vipCard: [],
        currentCard: {
          number: 0,
          remark: ''
        },
        qrcodeSize: uni.upx2px(500),
        codeshow: false,
        Buttonshow: false
        // phone: []
      };

    },
    computed: {
      ...mapGetters('m_user',['currentLocation', 'currentStoreId', 'isLogin', 'userInfo'])
    },
    onLoad(options) {
      this.getVipCard();
    },
    methods: {
      ...mapActions('m_user',['getCurrentLocation', 'getCode', 'getUserInfo']),
      // ...mapMutations(['setUserInfo']),
      change: function(e) {
        this.current = e.detail.current;
        if (this.vipCard.length > this.current) {
          this.currentCard = this.vipCard[this.current];
        }
      },
      detail: function() {
        uni.navigateTo({
          url: '/pages/template/mall/productDetail/productDetail'
        });
      },
      getVipCard: function() {
        let that = this;
        vipCard().then(res => {
          that.vipCard = res.data.vipCard;
          that.userVip = res.data.userVip[0];
          // console.log(res.data)
          if (that.vipCard.length > 0) {
            that.current = 0;
            that.currentCard = that.vipCard[that.current];
          }
          if (that.userVip) {
            that.makeMemberCode();
          } else {
            that.userVip = false;
          }
        }, error => {
          this.loading = false;
        });
      },
      buyMemberCard: function() {
        let that = this;
        let orderType = "vip"; //   
        if (that.userVip && that.userVip.vipCardId === that.currentCard.id) {
          orderType = "vip_up";
        }
        buyCard(that.currentCard.id, orderType, that.currentStoreId).then(res => {
          // console.log(res)
          uni.navigateTo({
            url: '/subpkg/myorder/myorder?id=' + res.data
          })
        }, error => {
          uni.showToast({
            title: error
          })
        });
      },
      makeMemberCode() {
        if (this.isLogin) {
          let params = {
            userId: this.userInfo.id,
            orderId: this.userVip.id,
            type: 1 //0购卡 1 会员卡使用 2 门票
          };
          new qrCode('memberCode', {
            text: JSON.stringify(params),
            width: this.qrcodeSize,
            height: this.qrcodeSize,
            colorDark: '#333333',
            colorLight: '#FFFFFF',
            correctLevel: qrCode.CorrectLevel.H
          });
        }
      },
      oncodeClose() {
        this.codeshow = false
      },
      oncodeClick() {
        this.codeshow = true
      },
      onButtonClose() {
        this.Buttonshow = false
      },
      onButtonClick() {
         uni.report('OpenVIP', '开通会员');
        if (!this.userInfo.phone || this.$util.trim(this.userInfo.phone).length < 1) {
          this.Buttonshow = true
        } else {
          this.buyMemberCard();
        }
      },
      // 绑定手机号
      bindPhone(e) {
        let that = this;
        this.getCode().then(code => {
          bindWxPhone(
            e.detail.encryptedData,
            e.detail.iv,
            code
          ).then(res => {
            if (res.success) {
              that.getUserInfo();
              that.onButtonClose();
              that.buyMemberCard()
            }
          }, error => {
            console.log(error);
          });
        }).catch(res => {
          console.log(res);
        });
      }
    }
  }
</script>

<style lang="scss">
  .container {
    /*banner*/

    .tui-banner-box {
      width: 100%;
      height: 490rpx;
      padding: 60rpx 0 100rpx;
      box-sizing: border-box;
      background: #fff;
    }

    .tui-banner-swiper {
      width: 100%;
      height: 388rpx;
    }

    .tui-banner-item {
      position: relative;
      padding: 0 16rpx;
      box-sizing: border-box;

      .minImage {
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: 54rpx;
        top: 36rpx;
      }

      .mintext {
        position: absolute;
        left: 54rpx;
        bottom: 78rpx;
      }
    }

    .tui-slide-image {
      width: 100%;
      height: 388rpx;
      display: block;
      border-radius: 30rpx;
      /* transition: all 0.1s linear; */
    }

    .tui-slide-text {
      position: absolute;
      top: 61rpx;
      left: 81rpx;

      h1 {
        font-size: 48rpx;
        color: #fff;
        font-weight: bold;
        margin-bottom: 16rpx;
      }

      text {
        color: rgba(255, 255, 255, 0.5);
        font-size: 26rpx;
      }
    }

    .tui-slide-box {
      position: absolute;
      bottom: 34rpx;
      right: 66rpx;
      width: 175rpx;
      height: 52rpx;
      background-color: rgba(255, 255, 255, 0.5);
      // box-shadow: 2rpx 2rpx 12rpx rgba(255, 255, 255, 0.5);
      border-radius: 26.5rpx;
      font-size: 30rpx;
      color: #fff;
      text-align: center;
      line-height: 52rpx;
    }

    .tui-banner-scale {
      transform: scaleY(0.9);
      transform-origin: center center;
    }

    /* #ifdef MP-WEIXIN */
    .tui-banner-swiper .wx-swiper-dot {
      width: 8rpx;
      height: 8rpx;
      display: inline-flex;
      background: none;
      justify-content: space-between;
    }

    .tui-banner-swiper .wx-swiper-dot::before {
      content: '';
      flex-grow: 1;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 16rpx;
      overflow: hidden;
    }

    .tui-banner-swiper .wx-swiper-dot-active::before {
      background: #fff;
    }

    .tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
      width: 16rpx;
    }

    /* #endif */

    /* #ifndef MP-WEIXIN */
    >>>.tui-banner-swiper .uni-swiper-dot {
      width: 8rpx;
      height: 8rpx;
      display: inline-flex;
      background: none;
      justify-content: space-between;
    }

    >>>.tui-banner-swiper .uni-swiper-dot::before {
      content: '';
      flex-grow: 1;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 16rpx;
      overflow: hidden;
    }

    >>>.tui-banner-swiper .uni-swiper-dot-active::before {
      background: #fff;
    }

    >>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
      width: 16rpx;
    }

    /* #endif */
    /*banner*/

    .dot {
      position: relative;
      height: 1rpx;
      background-color: rgba(61, 61, 61, 0.1);
      margin-top: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .dot_box {
        position: absolute;
        float: left;
        width: 32rpx;
        height: 32rpx;
        background-color: rgba(253, 211, 56, 1);
        border: 2px solid #000;
        border-radius: 50%;
      }

      .dot_box1 {
        position: absolute;
        z-index: 2;
        width: 14rpx;
        height: 14rpx;
        background-color: #000;
        border-radius: 50%;
      }
    }

    .bodyer {
      position: relative;
      height: 395rpx;
      background-color: #0066CC;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 50rpx;
      border-bottom-left-radius: 50rpx;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);
      padding: 50rpx 24rpx 0;
      z-index: -1;

      .bodyer_title {
        position: relative;
        z-index: 1;
        font-size: 34rpx;
        font-weight: bold;
        color: rgba(61, 61, 61, 1);
      }

      .headerTitle_img {
        position: absolute;
        left: 175rpx;
        top: 86rpx;
        z-index: 0;
        width: 140rpx;
        height: 8rpx;
        background-color: rgba(253, 211, 56, 1);
        border-radius: 207rpx;
      }

      .bodyer_box {
        display: flex;
        justify-content: space-between;

        .bodyer_left {
          width: 328rpx;
          height: 184rpx;
          background-color: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);
          border-radius: 20rpx;
          margin-top: 40rpx;
          padding: 33rpx;
          box-sizing: border-box;

          .bodyer_left_title {
            display: flex;
            align-items: center;
            font-size: 30rpx;

            image {
              width: 45rpx;
              height: 45rpx;
            }

            h1 {
              margin-left: 17rpx;
            }
          }

          .bodyer_left_text {
            font-size: 22rpx;
            padding-left: 60rpx;
            margin-top: 12rpx;
            color: rgba(61, 61, 61, 0.5);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }

    }

    .footer_text {
      font-size: 28rpx;
      color: rgba(61, 61, 61, 0.5);
      text-align: center;
      margin-top: 38rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }


    .open {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 128rpx;
      padding: 0 24rpx;
      box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;

      .open_text {
        display: flex;
        align-items: center;
      }

      .open_button {
        width: 320rpx;
        height: 96rpx;
        background-color: rgba(253, 211, 56, 1);
        border-radius: 226rpx;
        font-size: 36rpx;
        line-height: 96rpx;
        text-align: center;
        color: rgba(61, 61, 61, 1);
        font-size: 16px;
        font-weight: 500;
      }
    }
  }

  .qrcode {
    position: absolute;
    top: 0;
    right: 0;
    width: 500rpx;
    height: 500rpx;
  }

  .qrcode_button {
    padding: 0 30px;
    font-size: 36rpx;
    height: 400rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    button {
      background-color: #fdd338;
      font-size: 32rpx;
      // padding: 0 180rpx;
      width: 360rpx;
      border-radius: 41rpx;
      margin: 0px !important;
    }
  }
</style>
